<template>
  <div class="main-contrainer">
      <my-header>主界面</my-header>
      <router-view ></router-view>
      <my-footer class="fixed-bottom"></my-footer>
  </div>
</template>

<script>
import MyHeader from '../components/Header.vue'
import MyFooter from '../components/MyFooter.vue'
import {reactive, ref, provide} from 'vue'
import {useRoute} from 'vue-router'
export default {
    components:{
        MyHeader, MyFooter
    },
    setup(){
        // const route = useRoute()
        // console.log({...route.query})
        
    }
}
</script>

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .main-contrainer{
        position:relative;
        height: 100vh;
    }
   
.fixed-bottom{

    width: 100%;  
    
    position:absolute;
    bottom: 0;
    background-color:#ecf0f1;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1)
}
</style>